<template>
  <div class="h-full w-full flex flex-col justify-between">
    <div class="form p-[15px] pb-[10px]">
      <el-button type="primary" @click.stop="openEdit(null)">添加快捷回复</el-button>
    </div>
    <div class="px-[15px] pb-[10px] flex justify-start">
      <div>
        <el-alert
          title="预先设置一些常见问题的回复用语，帮助您更快的回复会员的咨询，长按上下拖拽可调整排序"
          type="warning"
          show-icon
          :closable="false"
        />
      </div>
    </div>
    <div class="grow-[1] h-0 mx-[15px]">
      <el-table
        scrollbar-always-on
        ref="elTableRef"
        v-loading="state.loading"
        :data="cloneList"
        height="100%"
        style="width: 100%"
        stripe
        border
        fit
      >
        <template #empty>
          <ui-empty />
        </template>
        <el-table-column align="center" prop="CSort" label="序号" width="80" />
        <el-table-column align="center" prop="Title" label="标题" />
        <el-table-column align="center" prop="Content" label="发送内容" />
        <el-table-column align="center" label="操作">
          <template #default="{ row }: TableItem">
            <el-button type="primary" size="small" @click="openEdit(row)">编辑</el-button>
            <el-button type="danger" size="small" @click="onDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="flex justify-end my-[10px] mx-[15px]">
      <ui-pagination
        :total="state.total"
        v-model:pageSize="state.pageSize"
        v-model:currentPage="state.page"
        @current-change="getData"
      ></ui-pagination>
    </div>
    <edit-reply-dialog ref="editReplyRef" :data="cur" :type="type" @update="getData" />
  </div>
</template>
<script setup lang="ts">
import editReplyDialog from "./components/edit-reply-dialog.vue";
import Sortable from "sortablejs";

import { useList } from "@/hooks/useList";
import { reqReplyDel, reqReplyList } from "@/api/setting";
import { cloneDeep } from "lodash-es";
import { ElMessageBox } from "element-plus";

interface TableItem {
  row: ReplyMo;
}

const cur = ref<ReplyMo | null>(null);
const type = ref<"edit" | "add">("add");
const editReplyRef = ref();
// 获取参数
const getParams = () => {
  return {};
};
const { elTableRef, state, list, getData } = useList<ReplyMo>(reqReplyList, getParams);
const cloneList = computed(() => {
  let arr = cloneDeep(list.value);
  arr.sort((a, b) => a.CSort - b.CSort);
  return arr;
});

const setSort = () => {
  const el = elTableRef?.value?.$el.querySelector("tbody");
  new Sortable(el, {
    animation: 180,
    delay: 0,
    onEnd: (e: any) => {
      const targetRow = list.value.splice(e.oldIndex, 1);
      list.value.splice(e.newIndex, 0, targetRow[0]);
      console.log(e.oldIndex, e.newIndex);
    }
  });
};

// 打开报表详情
const openEdit = (row: ReplyMo | null) => {
  cur.value = cloneDeep(row);
  type.value = "add";
  if (row) {
    type.value = "edit";
  }
  nextTick(() => {
    editReplyRef.value?.open();
  });
};

const onDelete = (row: ReplyMo) => {
  ElMessageBox.confirm(`是否进行删除操作`, "", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
    distinguishCancelAndClose: true,
    beforeClose: async (action, instance, done) => {
      if (action === "confirm") {
        try {
          instance.confirmButtonLoading = true; // 设置 "确定" 按钮加载中
          await reqReplyDel(row.Id);
          done();
          getData().then(() => {
            setSort();
          });
          instance.confirmButtonLoading = false;
        } catch (error) {
          done();
          console.error("操作失败", error);
          instance.confirmButtonLoading = false; // 如果失败，取消加载状态
        }
      } else {
        done(); // 取消时直接关闭
      }
    }
  });
};

onMounted(() => {
  getData().then(() => {
    setSort();
  });
});
</script>
